<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_箭头函数</title>
</head>
<body>
<!--
* 作用: 定义匿名函数(箭头函数都是匿名函数)
* 箭头函数的基本语法:
  * 没有参数: () => console.log('xxxx')
  * 一个参数: i => i+2
  * 大于一个参数: (i,j) => i+j
  * 函数体不用大括号: 默认返回结果，即隐式返回
  * 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回，即显示返回
* 使用场景: 多用来定义回调函数

* 箭头函数的特点：
    1、简洁的语法
    2、不绑定this
	    箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
        扩展理解： 箭头函数的this看外层的是否有函数，
                  如果有，外层函数的this就是内部箭头函数的this，
                  如果没有，则this是window。
	 3、可以隐式返回
* 箭头函数的口诀：
	删掉function关键字,加上一个胖箭头;
	没有参数加括号，一个参数可选择，多个参数逗号分隔
-->
<script type="text/javascript">
	  // 形参的情况
    //1、没有形参，并且函数体只有一条语句，自动返回结果
    let fun1 = () => console.log('1');
    fun1();

    //2、一个形参，并且函数体只有一条语句，自动返回结果
    let fun2 = x => x;
    console.log(fun2(3));
	
    //3、形参是一个以上，并且函数体只有一条语句，自动返回结果
    let fun3 = (x, y) => x + y;
    console.log(fun3(2, 3));

    // 函数体的情况
    // 函数体不止一条语句，则不可省略{}
      let fun4 = (x, y) => {
          console.log(x, y);
          return x + y;//函数都有返回值,不写return的话会默认返回undefined
      };
      fun4(34, 48);
	
    // 显式和隐式返回
    const numbers=[5,6,13,27]
    const double1=numbers.map(function(number){
      return number*2
    })
    console.log(double1)
    const double2=numbers.map((number)=>number*2)
    console.log(double2)
    
    // 命名函数和匿名函数
    function greet1(name){
      console.log(name)
    }
    greet1("命名函数")
    // 箭头函数都是匿名函数,一般会赋值给一个变量
    const greet2=(name)=>{console.log(name)}
    greet2("匿名函数")
	
</script>

</body>
</html>